<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>2D转换之旋转案例-书写三角</title>
        <style>
            div {
                position: relative;
                width: 249px;
                height: 35px;
                border: 1px solid #000;
            }

            div::after {
                content: "";
                position: absolute;
                top: 8px;
                right: 15px;
                width: 10px;
                height: 10px;
                /* 设置盒子相邻的两边 */
                border-right: 1px solid #000;
                border-bottom: 1px solid #000;
                /* 旋转相应的角度 */
                transform: rotate(45deg);
                transition: all 0.2s;
            }

            /* 鼠标经过div  里面的三角旋转 */
            div:hover::after {
                transform: rotate(225deg);
            }
        </style>
    </head>

    <body>
        <div></div>
    </body>
</html>
